<template>
    <div class="app-container">
        <el-form :model="filter" size="mini">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="起始调查期" label-width="100px">
                        <el-select v-model="filter.invTime1" placeholder="请选择" clearable style="width: 100%;">
                            <el-option v-for="invTime in invTimes" :label="invTime.investigationStartDate"
                                :value="invTime.investigationId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="结束调查期" label-width="100px">
                        <el-select v-model="filter.invTime2" placeholder="请选择" clearable style="width: 100%;">
                            <el-option v-for="invTime in invTimes" :label="invTime.investigationStartDate"
                                :value="invTime.investigationId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="分析维度" label-width="100px">
                        <el-radio-group v-model="dimension" size="mini">
                            <el-radio-button label="所在城市"></el-radio-button>
                            <el-radio-button label="所属行业"></el-radio-button>
                            <el-radio-button label="企业性质"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="display" icon="el-icon-search" size="mini">查询</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="info" @click="resetFilter" icon="el-icon-refresh-left" size="mini">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <v-chart class="chart" :option="option" autoresize />
        <div class="table">
            <el-table v-loading="listLoading" height="300px" stripe :data="showData" element-loading-text="Loading" border
                fit highlight-current-row :cell-style="{ padding: '5px 0' }" :cell-class-name="classChecker"
                :default-sort="{ prop: 'cat', order: 'descending' }">
                <el-table-column sortable prop="cat" label="城市/性质/行业" align="center"></el-table-column>
                <el-table-column sortable prop="companyCnt" label="平均企业总数" align="center"></el-table-column>
                <el-table-column sortable prop="iniCnt" label="平均建档期就业人数" align="center"></el-table-column>
                <el-table-column sortable prop="finCnt" label="平均调查期就业人数" align="center"></el-table-column>
                <el-table-column sortable prop="decCnt" label="平均岗位减少总数" align="center"></el-table-column>
                <el-table-column sortable prop="deltaCnt" label="平均岗位变化总数" align="center"></el-table-column>
                <el-table-column sortable prop="changeProportion" label="平均岗位变化占比" align="center"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getIndustries, getNatures, getAllEnterpriseInfo, getAllFormList, getAllInvestigationInfo } from '@/api/province/dataVisualization';

import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import VChart, { THEME_KEY } from 'vue-echarts';
import {
    LegendComponent,
    TooltipComponent,
    ToolboxComponent,
    DatasetComponent,
    GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

use([
    LegendComponent,
    TooltipComponent,
    ToolboxComponent,
    DatasetComponent,
    GridComponent,
    BarChart,
    CanvasRenderer
])


export default ({
    provide: {
        [THEME_KEY]: 'light',
    },

    created() {
        this.listLoading = true;
        this.fetchData().then(() => {
            this.listLoading = false;
        })
    },

    components: {
        VChart,
    },

    methods: {
        resetFilter() {
            this.filter = {
                city: '',
                nature: '',
                industry: '',
                invTime1: '',
                invTime2: ''
            }
        },

        display() {
            if (this.filter.invTime1 == '' || this.filter.invTime2 == '') {
                this.$message({
                    message: "请指定两个调查期",
                    type: 'warning'
                })
                return;
            }

            if (this.filter.invTime1 > this.filter.invTime2) {
                this.$message({
                    message: "结束调查期应大于等于起始调查期",
                    type: 'warning'
                })
                return;
            }


            this.option.xAxis = {
                type: 'category',
                data: [],
                axisLabel: {
                    interval: 0,
                    rotate: 20,
                    margin: -10
                }
            }

            if (this.dimension == '所在城市') {
                this.option.xAxis.data = this.cities;
            } else if (this.dimension == '所属行业') {
                this.option.xAxis.data = this.industries;
            } else if (this.dimension == '企业性质') {
                this.option.xAxis.data = this.natures;
            }

            this.showData = []
            this.option.xAxis.data.forEach(item => {
                this.showData.push({
                    cat: item,
                    companyCnt: 0,
                    iniCnt: 0,
                    finCnt: 0,
                    deltaCnt: 0,
                    decCnt: 0,
                    changeProportion: '0%'
                })
            })

            this.option.series = [{
                name: '平均建档期岗位数',
                type: 'bar',
                data: []
            },
            {
                name: '平均调查期岗位数',
                type: 'bar',
                data: []
            },
            {
                name: '平均岗位变化总数',
                type: 'bar',
                data: []
            },
            {
                name: '平均岗位减少总数',
                type: 'bar',
                data: []
            }]

            let count = 0;
            this.invTimes.forEach(item => {
                if (item.investigationStartDate >= this.invTimesMap.get(this.filter.invTime1) && item.investigationStartDate <= this.invTimesMap.get(this.filter.invTime2)) {
                    count += 1;
                }
            })


            this.rawData.forEach(item => {
                if (item.investigationStartDate >= this.invTimesMap.get(this.filter.invTime1) && item.investigationStartDate <= this.invTimesMap.get(this.filter.invTime2)) {
                    let idx;
                    if (this.dimension == '所在城市') {
                        idx = this.citiesMap.get(this.companiesMap.get(item.companyId).companyCity);
                    } else if (this.dimension == '所属行业') {
                        idx = this.industriesMap.get(this.companiesMap.get(item.companyId).companyIndustry);
                    } else if (this.dimension == '企业性质') {
                        idx = this.naturesMap.get(this.companiesMap.get(item.companyId).companyNature);
                    }
                    this.showData.at(idx).companyCnt += 1;
                    this.showData.at(idx).iniCnt += item.formStartTotalNum;
                    this.showData.at(idx).finCnt += item.formEndTotalNum;
                    this.showData.at(idx).deltaCnt += item.formEndTotalNum - item.formStartTotalNum;
                    this.showData.at(idx).decCnt += (item.formEndTotalNum - item.formStartTotalNum < 0) ? item.formEndTotalNum - item.formStartTotalNum : 0;
                    this.showData.at(idx).changeProportion = this.showData.at(idx).iniCnt == 0 ? '无意义' : (100 * this.showData.at(idx).deltaCnt / this.showData.at(idx).iniCnt).toFixed(1) + '%';
                }
            })

            this.showData.forEach(item => {
                item.companyCnt = Math.ceil(item.companyCnt / count);
                item.iniCnt = Math.ceil(item.iniCnt / count);
                item.finCnt = Math.ceil(item.finCnt / count);
                item.deltaCnt = Math.ceil(item.deltaCnt / count);
                item.decCnt = Math.ceil(item.decCnt / count);
                this.option.series.at(0).data.push(item.iniCnt);
                this.option.series.at(1).data.push(item.finCnt);
                this.option.series.at(2).data.push(item.deltaCnt);
                this.option.series.at(3).data.push(item.decCnt);
            })
        },


        async fetchData() {
            getAllEnterpriseInfo({}).then(response => {
                this.companies = response.data;
                this.companies.forEach(item => {
                    this.companiesMap.set(item.companyId, item);
                })
                this.cities = Array.from(new Set(this.companies.map(item => item.companyCity)));
                this.cities.forEach((item, idx) => { this.citiesMap.set(item, idx) });
                this.natures = Array.from(new Set(this.companies.map(item => item.companyNature)))
                this.natures.forEach((item, idx) => { this.naturesMap.set(item, idx) });
                this.industries = Array.from(new Set(this.companies.map(item => item.companyIndustry)))
                this.industries.forEach((item, idx) => { this.industriesMap.set(item, idx) });
                // console.log(response)
            })
            getAllInvestigationInfo({}).then(response => {
                this.invTimes = response.data;
                this.invTimes.forEach(item => {
                    this.invTimesMap.set(item.investigationId, item.investigationStartDate);
                })
                // console.log(response)
            })
            getAllFormList({ company: {}, investigationPeriod: {} }).then(response => {
                this.rawData = response.data;
                // console.log(response)
            })

        },

        classChecker({ row, column }) {
            if (column.property === 'deltaCnt' || column.property === 'changeProportion') {
                let val = row.deltaCnt
                if (val > 0) {
                    return 'greenClass'
                } else if (val < 0) {
                    return 'redClass'
                }
            }
            return ''
        }

    },

    data() {
        return {
            option: {
                legend: {},
                tooltip: {},
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [],
                },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{
                    name: '平均建档期岗位数',
                    type: 'bar',
                    data: []
                },
                {
                    name: '平均调查期岗位数',
                    type: 'bar',
                    data: []
                },
                {
                    name: '平均岗位变化总数',
                    type: 'bar',
                    data: []
                },
                {
                    name: '平均岗位减少总数',
                    type: 'bar',
                    data: []
                }]
            },

            cities: [],
            citiesMap: new Map(),
            natures: [],
            naturesMap: new Map(),
            industries: [],
            industriesMap: new Map(),
            invTimes: [],
            invTimesMap: new Map(),
            companies: [],
            companiesMap: new Map(),
            rawData: [],
            filter: {
                city: '',
                nature: '',
                industry: '',
                invTime1: '',
                invTime2: ''
            },
            showData: [],
            listLoading: false,
            props: { multiple: true },
            dimension: '所在城市'
        }
    }
});
</script>
  
<style scoped>
.chart {
    height: 350px;
    width: 100%;
}
</style>

<style>
.el-table .greenClass {
    color: green;
}

.el-table .redClass {
    color: red;
}
</style>
  